<template>
	<view class="v1">

		<!-- v2父容器  子view使用绝对布局 -->
		<view class="v2">
			<view class="dltext">登录</view>

			<!-- 手机号 -->
			<view class="phoneCs">
				<image src="@/static/images/user.png" class="ph"></image>
				<input placeholder="请输入账号" v-model="user" />
			</view>

			<!-- 密码 -->
			<view class="passwordCs">
				<image src="@/static/images/psd.png" class="ps"></image>
				<input type="password" placeholder="请输入密码" v-model="password" />
				<!-- <image src="/images/eye-open.png" class="eye"></image> -->
			</view>

			<!-- 注册 和忘记密码  -->
			<view class="zhuce">
				<navigator @click="registerFn">立即注册</navigator>
				<navigator>忘记密码?</navigator>
			</view>

			<!-- 登录按钮 -->
			<view class="denglu">
				<button class="btn-dl" type="primary" @click="toLogin">登录</button>
			</view>

			<!-- 协议区  xieyi -->
			<view class="xieyi">
				<checkbox class="isXY"></checkbox>
				<view class="text-xy">同意自习室的《使用协议》</view>
			</view>
		</view>

		<!-- 提示框  使用以下方式登录 -->
		<view class="v3">
			<view class="line"></view>
			<view class="lText">您还可以使用以下方式登录</view>
			<view class="line"></view>
		</view>

		<!-- qq  weixin  weibo 图标展示view -->
		<view class="qwwIcon">
			<image src="@/static/images/微信.png" @click="wxLog"></image>
			<image src="@/static/images/微博.png" @click="toLog"></image>
			<image src="@/static/images/QQ.png" @click="toLog"></image>
		</view>

	</view>

</template>
<script>
	import store from '../../store/index.js';
	import http from '../../utils/http'
	export default {
		components: {},
		data() {
			return {
				user: '',
				password: ''
			}
		},
		methods: {
			wxLog: function() {
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					  // console.log(loginRes)
					  wx.showToast({
					  	title: '开发中',
					  	icon: 'error',
					  	duration: 1000 //持续的时间
					  })
				    // 获取用户信息
				    uni.getUserInfo({
				      provider: 'weixin',
				      success: function (infoRes) {
						console.log('infoRes：',infoRes)
						console.log("用户头像：",infoRes.userInfo.avatarUrl)
				        console.log('用户昵称为：' + infoRes.userInfo.nickName);
				      }
				    });
				  }
				});
			},
			registerFn:function(){
				wx.navigateTo({
					url: "../register/register"
				})
			},
			toLog:function(){
				wx.showToast({
					title: '开发中',
					icon: 'error',
					duration: 1000 //持续的时间
				})
			},
			toLogin: function() {
				http({
					url: '/user/login',
					method: 'post',
					data: {
						name: this.user,
						pwd: this.password
					}
				}).then((data) => {
					if (data.code == 0) {
						if (data.data.name) {
							wx.setStorage({
								key: "token",
								data: data.data.token
							})
							wx.setStorage({
								key: "userId",
								data: data.data.userid
							})
							store.state.userId=data.data.userid;
							wx.setStorage({
								key: "name",
								data: data.data.name
							})
							wx.showToast({
								title: '登录成功',
								icon: 'success',
								duration: 2000, //持续的时间,
							})
							wx.switchTab({
								url: "../Home/Home"
							})
						}

					} else {
						uni.showToast({
							title: '账号或密码错误!!',
							icon: 'error',
							duration: 1000,
						});
					}
				})
			}

		}
	}
</script>
<style>
	/* 最大的父元素 */
	.v1 {
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		background: #356363;
		/* 换图片 */

	}

	/* 白色区域 */
	.v1 .v2 {
		position: relative;
		margin-top: 150rpx;
		left: 100rpx;
		width: 545rpx;
		height: 750rpx;
		background: #FFFFFF;
		border-radius: 50rpx;
	}

	/* 白色区域内的登录文本 */
	.v1 .v2 .dltext {
		margin-top: 50rpx;
		position: absolute;
		margin-left: 80rpx;
		width: 150rpx;
		height: 100rpx;
		font-size: 60rpx;
		font-family: Helvetica;
		color: #000000;
		line-height: 100rpx;
		letter-spacing: 2rpx;
	}

	/* 手机图片+输入框+下划线的父容器view */
	.v1 .v2 .phoneCs {
		margin-top: 200rpx;
		margin-left: 35rpx;
		position: absolute;
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
	}

	/* 手机图标 */
	.v1 .v2 .phoneCs .ph {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 55rpx;
		height: 55rpx;
	}

	/* 手机号输入框 */
	.v1 .v2 .phoneCs input {
		width: 200rpx;
		font-size: 25rpx;
		margin-top: 15rpx;
		margin-left: 30rpx;
	}

	/* 密码图标+输入框+小眼睛图标+下划线父容器view */
	.v1 .v2 .passwordCs {
		margin-top: 400rpx;
		margin-left: 35rpx;
		position: absolute;
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
	}

	/* 密码图标 */
	.v1 .v2 .passwordCs .ps {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 55rpx;
		height: 55rpx;
	}

	/* 眼睛 图标*/
	.v1 .v2 .passwordCs .eye {
		margin-top: 5rpx;
		margin-left: 65rpx;
		width: 55rpx;
		height: 55rpx;
	}

	/* 密码输入框 */
	.v1 .v2 .passwordCs input {
		width: 200rpx;
		font-size: 25rpx;
		margin-top: 15rpx;
		margin-left: 30rpx;
	}

	/* 注册+忘记密码父容器 */
	.v1 .v2 .zhuce {
		font-size: 25rpx;
		margin-left: 85rpx;
		width: 370rpx;
		margin-top: 540rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
	}

	/* 登录按钮容器view */
	.v1 .v2 .denglu {
		width: 350rpx;
		height: 50rpx;
		position: absolute;
		margin-top: 600rpx;
		margin-left: 85rpx;

	}

	/* 登录按钮 */
	.v1 .v2 .denglu button {
		padding: 0rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}

	/* 复选框+协议文字容器view */
	.v1 .v2 .xieyi {
		margin-left: 10rpx;
		margin-top: 680rpx;
		width: 480rpx;
		display: flex;
		position: absolute;
	}

	/* 复选框 */
	.v1 .v2 .xieyi .isXY {
		margin-left: 85rpx;
		/* 修改复选框的大小 */
		transform: scale(.6);
	}

	/* 协议文本 */
	.v1 .v2 .xieyi .text-xy {
		margin-left: 0rpx;
		margin-top: 12rpx;
		color: #000000;
		font-size: 18rpx;
		vertical-align: middle;
	}

	/* 提示文本 */
	.v3 {
		padding-left: 100rpx;
		display: flex;
		position: relative;
		width: 100%;
		height: 60rpx;
		padding-top: 50rpx;
	}

	.v3 .line {
		margin-left: 5rpx;
		margin-top: 18rpx;
		width: 120rpx;
		height: 3rpx;
		background-color: #FFFFFF;
	}

	.v3 .lText {
		color: #FFFFFF;
		font-size: 25rpx;
	}

	/* qq wx wb */
	.qwwIcon {
		padding-top: 40rpx;
		position: relative;
		display: flex;
		width: 100%;
		height: 150rpx;
	}

	.qwwIcon image {
		padding-left: 120rpx;
		width: 80rpx;
		height: 80rpx;
	}
</style>
